<template>
  <div class="Activity">
    <div class="barry">
      <van-notice-bar background="#fff" left-icon="volume-o" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <div v-for="(item, index) in activitydata" :key="index">
            <van-swipe-item>#{{ item.name }}</van-swipe-item>
          </div>
        </van-swipe>
      </van-notice-bar>
      <div class="ongoing">
        <div class="ongoing-text">当前活动正在火热进行中:</div>
        <div
          class="ongoing-item"
          v-for="(item, index) in ongoingdata"
          :key="index"
        >
          <div class="ongoing-img"><img :src="item.image" alt="" /></div>
        </div>
      </div>

      <div class="ended">
        <div class="ended-text">当前活动已经结束了:</div>
        <div
          class="ongoing-item"
          v-for="(item, index) in endeddata"
          :key="index"
        >
          <div class="ongoing-img"><img :src="item.image" alt="" /></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Activity",
  data() {
    return {
      activitydata: [],
      ongoingdata: [],
      endeddata: [],
    };
  },
  created() {
    this.getactivitydata();
  },
  methods: {
    getactivitydata() {
      this.axios({
        method: "get",
        url: "https://apis.netstart.cn/douguo/home/events/getlists?offset=0limit=20",
      })
        .then((res) => {
          this.activitydata = res.data.data.banner;
          this.ongoingdata = res.data.data.ongoing.events;
          this.endeddata = res.data.data.ended.events;
          // console.log('this.activitydata==>',this.activitydata);
          console.log("res==>", res);
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.ongoing-text {
  font-size: 18px;
  font-weight: bold;
  text-shadow: 5px 5px 5px #ff0000;
  padding: 10px;
}
.ongoing-item {
  margin: auto;
}
.ongoing-img {
  width: 100%;
  height: 100%;
}
.ongoing-img img {
  width: 94%;
  height: 100%;
  border-radius: 10px;
  margin: 0 10px;
}
.ended-text {
  font-size: 18px;
  font-weight: bold;
  padding: 10px 10px 15px;
}
</style>